<template>
  <div style="width:100%;height:100%">
    <div id="bottomLeftTotalChart" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
import theme from '@/assets/js/purple'
export default {
  data() {
    return {
      chart: null,
    };
  },
  created () {

  },
  mixins: [echartMixins],
  mounted() {
    this.draw();
  },
  methods: {
    async getAccumulate () {
      const res = await this.$http.get("china_accumulate/");
    //   console.log(res.data.data)
      if (res.status !== 200){
        return this.$message.error('获取总共趋势图失败')
      }
      return res.data.data;
    },
    async draw() {
      // 基于准备好的dom，初始化echarts实例
      // [Vue warn]: Error in mounted hook;"TypeError: Cannot readl property'init' of undefined"
      // 版本问题，别用最新的5.0.0  
      this.$echarts.registerTheme('theme', theme);
      this.chart = this.$echarts.init(document.getElementById("bottomLeftTotalChart"),theme);
      let option_accumulate = await this.getAccumulate();
      this.chart.setOption(option_accumulate);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>

</style>